<template>
  <div>
    <markdown-editor v-model="content.data" ref="markdownEditor" :configs="configs"></markdown-editor>
    <el-button size="mini" type="primary" @click="toHtml">转换html</el-button>
  </div>
</template>

<script>
import "font-awesome/css/font-awesome.min.css";
import markdownEditor from "vue-simplemde/src/markdown-editor";
export default {
  components: {
    markdownEditor
  },
  props: {
    content: {
      data: ""
    }
  },
  data() {
    return {
      configs: {
        autoDownloadFontAwesome: false,
        autofocus: true,
        toolbar: [
          "bold",
          "italic",
          "heading",
          "strikethrough",
          "|",
          "code",
          "ordered-list",
          "|",
          "link",
          "image",
          "table",
          "horizontal-rule",
          "|",
          "preview"
        ]
      }
    };
  },
  computed: {
    simplemde() {
      return this.$refs.markdownEditor.simplemde;
    }
  },
  methods: {
    toHtml() {
      this.$emit('toHtml',this.simplemde.markdown(this.content.data))
    }
  }
};
</script>

<style>
@import "simplemde/dist/simplemde.min.css";
/* 去除粉色背景 */
.CodeMirror
  .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
  background: unset;
}
/* 固定高度 */
.markdown-editor .CodeMirror {
  height: 450px;
}
</style>